<template>
	<view class="content">
		<view class="forget-bg">
			<view class="forget-card">
				<view class="login-head">项目申请书</view>
				<view class="forget-input forget-margin-b">
					<input type="text" v-model="proName" placeholder="请输入项目名称" />
				</view>
				<view class="forget-input forget-margin-b">
					<input type="text" v-model="proCost" placeholder="请输入项目成本" />
				</view>
				<view class="forget-input forget-margin-b">
					<input type="text" v-model="proResource" placeholder="请确认项目资源" />
				</view>
				<view class="forget-input forget-margin-b">
					<input type="text" v-model="proContent" placeholder="请输入项目简介" />
				</view>
				<view class="forget-input forget-margin-b">
					<input type="text" v-model="proRemark" placeholder="请输入项目备注" />
				</view>
			</view>
		</view>
		<view class="forget-btn">
			<button class="landing" type="primary" @tap="setProject()">提交</button>
		</view>
	</view>
</template>

<script>

	import service from '../../service.js';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import store from '../../store/index.js'
	export default {
		data() {
			return {
				proName: '',
				proCost: '',
				proResource: '',
				proContent: '',
				proRemark: '',
			}
		},
		computed: mapState(['userName','userId']),
		methods: {
			setProject() {
				/**
				 * 客户端对账号信息进行一些必要的校验。
				 * 实际开发中，根据业务需要进行处理，这里仅做示例。
				 */
				if (this.proName.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入项目名称'
					});
					return;
				}
				if (this.proCost.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入项目成本'
					});
					return;
				}
				if (this.proResource.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入项目资源'
					});
					return;
				}
				if (this.proContent.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入项目简介'
					});
					return;
				}
				if (this.proRemark.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入项目备注'
					});
					return;
				}
				uni.request({
					url:"http://115.159.219.165:8080/project/submitProject",
					data: {
						userId: store.state.userId,
						name: this.proName,
						cost: this.proCost,
						resourse: this.proResource,
						desc: this.proContent,
						remark: this.proRemark
					},
					method: 'POST',
					success: function(data) {
						console.log(data.data);
						uni.switchTab({
							url: '/pages/user/user'
						});
						uni.showToast({
							title: '申请成功',
							duration: 2000
						});
					}.bind(this),
					fail: function(data, code) {
						console.log('fail' + JSON.stringify(data));
					}
				});
			}
		}
	}
</script>

<style>
	.login-head{
		color: $light_gray;
		padding: 25upx 10upx 55upx 10upx;
		font-size: 26px;
		text-align: center;
		font-weight: bold;
	}
	.verify-left{
		width: calc(100% - 260upx);
	}
	.verify-right{
		padding-left: 20upx;
	}
	.verify-btn{
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		width: 240upx;
		border-radius: 8upx;
		background: linear-gradient(left,#FF978D, #FFBB69);
	}
	.verify-left,.verify-right{
		float: left;
	}
	.landing{
		height: 84upx;
		line-height: 84upx;
		border-radius: 44upx;
		font-size: 32upx;
		background: linear-gradient(left,#0faeff, #87CEEB);
	}
	.forget-btn{
		padding: 10upx 20upx;
		margin-top: 740upx;
	}

	.forget-input input{
		background: #F2F5F6;
		font-size: 28upx;
		padding: 10upx 25upx;
		height: 62upx;
		line-height: 62upx;
		border-radius: 8upx;
	}
	.forget-margin-b{
		margin-bottom: 25upx;
	}
	.forget-input{
		padding: 10upx 20upx;
		overflow: auto;
	}
	.forget-card{
		background: #fff;
		border-radius: 12upx;
		padding: 60upx 25upx;
		box-shadow: 0 6upx 18upx rgba(0,0,0,0.12);
		position: relative;
		margin-top: 120upx;
	}
	.forget-bg {
		height: 260upx;
		padding: 25upx;
		background: linear-gradient(#0faeff, #87CEEB);
	}
</style>
